---
import { Image } from 'astro:assets';
import HoustonOmg from '~/assets/houston_omg.png';
import { useTranslations } from '~/i18n/util';

const t = useTranslations(Astro);
---

<aside class="not-content">
	<div>
		<a href="https://starlight.astro.build/">
			<h2>{t('starlight.title')}</h2>
		</a>
		<p>
			{t('starlight.description')}<b>→</b>
		</p>
	</div>
	<div>
		<Image src={HoustonOmg} alt="" width="180" />
	</div>
</aside>

<style>
	aside {
		margin: 1rem 0;
		position: relative;
		background-color: var(--sl-color-gray-6);
		padding: 1rem;
		border-radius: 0.5rem;
		display: flex;
		border: 1px solid var(--sl-color-text-accent);
		box-shadow: var(--sl-shadow-md);
		overflow-y: hidden;
	}
	aside a::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
	}
	aside h2 {
		font-size: var(--sl-text-lg) !important;
	}
	aside p {
		font-size: var(--sl-text-sm) !important;
		line-height: normal;
	}
	aside > div:last-child {
		display: flex;
		align-items: end;
	}
	aside img {
		margin-bottom: -1rem;
		transition: transform 0.3s;
		transform: translateY(2px);
		width: 5.5rem;
		height: auto;
	}

	aside:hover img {
		transform: translateY(0px);
	}
</style>
